<template>
  <el-table :data="volunData" style="width: 100%">
    <el-table-column prop="v_name" label="姓名" />
    <el-table-column prop="v_sex" label="性别" width="60px" />
    <el-table-column prop="v_age" label="年龄" width="60px" />
    <el-table-column prop="v_phone" label="手机号" />
    <el-table-column label="出生日期">
      <template #default="scope">
        {{ utils.ymd(scope.row.v_birthday) }}
      </template>
    </el-table-column>
    <el-table-column prop="v_email" label="邮箱" />
    <el-table-column prop="v_works" label="职业" />
    <el-table-column label="状态" width="180px">
      <template #default="scope" >
        <div v-if="scope.row.state == 0" style="color: red">
          <el-tag type="danger">待审核</el-tag>
        </div>
        <div v-if="scope.row.state == 1" style="color: darkgreen">
          <el-tag type="success">已通过</el-tag>
        </div>
        <div v-if="scope.row.state == 2">
          <el-tag type="danger" style="margin-right: 5px">未通过</el-tag>
          <el-tag type="info" class="submitTag" @click="submitTag(scope.row.id)"
            >重新提交</el-tag
          >
        </div>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { getCurrentInstance, onMounted, ref } from "vue";
import { useStore } from "@/stores/counter";
import utils from "@/utils/utils";
import { ElMessage, ElMessageBox } from "element-plus";

const { userInfos } = useStore();
const volunData = ref<any>([]);
const { proxy }: any = getCurrentInstance();

onMounted(async () => {
  await getVoluns();
});

function getVoluns() {
  proxy.$http
    .get("/user/findOne?id=" + userInfos.id)
    .then((res: any) => {
      volunData.value = res.volunteer;
    })
    .catch((error: any) => {
      return;
    });
}


const submitTag = (id: number) => {
  ElMessageBox.alert("提交成功", {
    confirmButtonText: "确定",
  }).then(() => {
    proxy.$http
      .post("volunteer/update/" + id, { state: 0 })
      .then(async (res: any) => {
        ElMessage.success("提交成功");
        await getVoluns();
      });
  });
};
</script>

<style lang="less" scoped>
.submitTag:hover {
  cursor: pointer;
}
</style>
